﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>ASP.NET Web API</title>
    <link href="../../Content/Site.css" rel="stylesheet" />
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript">
        // TODO Add script
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
                // Send an AJAX request
                $.getJSON("api/products/",
            function (data) {
                // On success, 'data' contains a list of products.
                $.each(data, function (key, val) {

                    // Format the text to display.
                    var str = val.Name + ': $' + val.Price;

                    // Add a list item for the product.
                    $('<li/>', { text: str })
                    .appendTo($('#products'));
                });
            });
        });

        function find() {
            var id = $('#prodId').val();
            $.getJSON("api/products/" + id,
            function (data) {
                var str = data.Name + ': $' + data.Price;
                $('#product').text(str);
            })
        .fail(
            function (jqXHR, textStatus, err) {
                $('#product').text('Error: ' + err);
            });
        }  
    </script>
</head>
<body id="body" >
    <div class="main-content">
        <div>
            <h1>All Products</h1>
            <ul id="products"/>
        </div>
        <div>
            <label for="prodId">ID:</label>
            <input type="text" id="prodId" size="5"/>
            <input type="button" value="Search" onclick="find();" />
            <p id="product" />
        </div>
    </div>
</body>
</html>